<template>
	<a-layout-content class="wrapper flex flex-v" :class="{ hastablefixed: hastablefixed }">
		<div class="pagehd flex flex-pack-justify">
			<slot name="breadcrumb">
				<a-breadcrumb class="breadcrumb">
					<a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
						<router-link v-if="item.name != name" :to="{ path: item.path }">{{ item.meta.title }}</router-link>
						<span v-else>{{ item.meta.title }}</span>
					</a-breadcrumb-item>
				</a-breadcrumb>
			</slot>
			<slot name="hd-right">
				<div class="handlerbtn"><slot name="hd-button"></slot></div>
			</slot>
		</div>
		<a-card :bordered="false" class="cardbox flex-1">
			<slot name="tablelist">
				<!--筛选条件-->
				<div class="flex topbar" ref="filterbar" v-show="superQueryFieldList.length > 0">
					<filterbar
						@handlerSearch="handlerSearch"
						:showAllfieldList="showAllfieldList"
						@handlerReset="handlerSearch"
						:field-list="superQueryFieldList"
						:labelType="labelType"
						class="flex-1"
						:modeType="modeType"
					></filterbar>
				</div>
				<slot name="extraContent"></slot>
				<ResizeObserver @resize="onResize">
					<div class="viewlist flex-1" ref="viewlist" :style="{ marginBottom: ishasfooter ? '-56px' : 0 }">
						<!--表格-->
						<s-table
							bordered
							:columns="columns"
							:data="loadListData"
							:rowKey="rowKey"
							ref="table"
							:scroll="{ x: 1000, y: hastablefixed ? (!ishasfooter ? scrolly : pages == 0 ? scrolly - 56 : scrolly - 60) : false }"
							size="small"
							:rowSelection="
								isRowSelection
									? {
											selectedRowKeys: selectedRowKeys,
											onChange: onSelectChange,
											getCheckboxProps: record => ({
												props: {
													disabled: disabledKey ? record[disabledKey] != disabledValue : false
												}
											})
									  }
									: null
							"
							:isFirstLoad="isFirstLoad"
							:pageSizeOptions="pageSizeOptions"
							:showPagination="showPagination"
							:pageNum="pageNum"
						>
							<template v-for="item in tableSlot" :slot="item" slot-scope="text, record, index">
								<slot :name="item" v-bind="{ text, record, index }"></slot>
							</template>
						</s-table>
						<div class="footerbar" :class="{ hasNoRecord: pages == 0, showfooter: ishasfooter }"><slot name="footer"></slot></div>
					</div>
				</ResizeObserver>
			</slot>
		</a-card>
		<slot></slot>
	</a-layout-content>
</template>

<script>
import ResizeObserver from '@/components/vueSizeObserver';
import { rowSelection, tableResize } from '@/mixins';
import QS from 'qs';
import { clearDeep } from '@/utils/base';
import { mapMutations, mapState } from 'vuex';
export default {
	name: 'proTable',
	data() {
		return {
			breadList: [],
			filter: {},
			isShowFilterbar: false,
			pageSizeOptions: this.pageSizeOption,
			isOpen: false,
			pages: 0,
			ishasfooter: false
		};
	},
	mixins: [rowSelection, tableResize],
	components: {
		ResizeObserver
	},
	computed: {
		...mapState(['itemfilter']),
		cachedViews() {
			return this.$store.state.cachedViews;
		},
		getTitle() {
			return this.$route.meta.title;
		},
		superQueryFieldList() {
			if (this.columns && this.columns.length > 0) {
				let list = this.columns
					.filter(item => item.searchInfo)
					.map(item => {
						let { key, title, searchInfo } = item;
						return Object.assign({}, { value: key, text: title }, searchInfo);
					});
				return list;
			} else {
				return [];
			}
		},
		tableSlot() {
			if (this.columns && this.columns.length > 0) {
				let list = this.columns.filter(item => item.scopedSlots).map(item => item.scopedSlots.customRender);
				return list;
			} else {
				return [];
			}
		}
	},

	props: {
		// isShowFilterbar: {
		// 	type: Boolean,
		// 	default: true
		// },
		loadDataUrl: {
			type: String,
			default: ''
			// required: true
		},
		loadListFun: {
			type: Function,
			default: null
		},
		columns: {
			type: Array,
			default: () => []
		},
		showAllfieldList: {
			type: Boolean,
			default: true
		},
		rowKey: {
			type: String,
			default: 'id'
		},
		isFirstLoad: {
			type: Boolean,
			default: true
		},
		disabledKey: {
			type: String,
			default: ''
		},
		disabledValue: {
			type: String,
			default: ''
		},
		pageSizeOption: {
			type: Array,
			default: () => ['10', '20', '30', '40', '50', '100']
		},
		isRowSelection: {
			type: Boolean,
			default: false
		},
		extendParam: {
			type: Object,
			default: null
		},
		showPagination: {
			type: String | Boolean,
			default: true
		},
		/* 筛选条件样式 */
		labelType: {
			type: [String, Number],
			default: 1 //0 隐藏lable 1，显示lable
		},
		/* 设置当前页 */
		pageNum: {
			type: Number,
			default: 1
		},
		/* 筛选条件一次显示多少 */
		modeType: {
			type: [String, Number],
			default: 0 //0 正常宽度，1小尺寸宽度
		},
		// 表头固定
		hastablefixed: {
			type: String | Boolean,
			default: true
		}
	},
	created() {
		this.getBreadcrumb();
		this.ishasfooter = !!this.$slots.footer;
	},
	methods: {
		...mapMutations(['SET_FILTER']),
		getBreadcrumb() {
			this.breadList = [];
			this.name = this.$route.name;
			this.$route.matched.forEach(item => {
				if (item.meta.title !== '首页') this.breadList.push(item);
			});
			// console.log('this.breadList', this.breadList);
		},
		/* 筛选 */
		handlerSearch(param) {
			this.resetSelectedRowKeys();
			/* 过滤掉空对象 */
			let obj = JSON.parse(JSON.stringify(param));
			clearDeep(obj);
			/* 判断有没有筛选的拦截 */
			const handlerSearch = this.$listeners['handlerSearch'];
			if (handlerSearch && typeof handlerSearch === 'function') {
				handlerSearch(obj);
			} else {
				this.loadTable(obj);
			}
		},
		/* 重置列表 */
		loadTable(obj, type) {
			let allkeylist = [];
			/* 过滤一次 all 选项 */
			for (var key in obj) {
				if (obj[key] == 'all') {
					allkeylist.push(key);
				}
			}
			this.superQueryFieldList.forEach(item => {
				if (item.type == 'select' && allkeylist.includes(item.value)) {
					obj[item.value] = '';
				}
			});
			clearDeep(obj);
			this.filter = { ...obj };
			this.$refs.table.refresh(type);
		},
		/* 刷新列表 */
		handlerRefresh(type) {
			this.resetSelectedRowKeys();
			this.$refs.table.refresh(type);
		},
		/* 清空选中的checkbox */
		resetSelectedRowKeys() {
			this.onSelectChange([]);
		},
		loadListData(parameter) {
			if (this.loadListFun) {
				return this.loadListFun(parameter);
			} else {
				return this.$postAction(
					this.loadDataUrl,
					Object.assign(
						{},
						this.extendParam ? this.extendParam : {},
						this.filter,
						!!this.showPagination
							? {
									pageNum: parameter.pageNum,
									pageSize: parameter.pageSize
							  }
							: {}
					)
				).then(res => {
					this.pages = res.data.pages;
					if (this.loadDataUrl == this.$api.getProductList) {
						let filter = Object.assign({}, this.itemfilter['proitem'], { pages: res.data.current });
						this.SET_FILTER({ name: 'proitem', filerinfo: filter });
					}
					return res.data;
				});
			}
		},
		addRecord() {
			this.$emit('addRecord');
		},
		delRecord() {
			this.$emit('delRecord', this.selectedRowKeys);
		}
	},
	watch: {
		$route() {
			this.getBreadcrumb();
		}
	}
};
</script>

<style lang="less" scoped>
.wrapper {
	position: relative;
	margin: 30px;
	min-height: calc(100% - 60px);
	height: auto;
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	// box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
	@media (max-width: 479px) {
		margin: 10px;
		min-height: calc(100% - 64px);
	}
	&.hastablefixed {
		height: calc(100% - 60px);
		min-height: 370px;
	}
}

.pagehd {
	overflow: hidden;
	border-bottom: none;
	// background: #fafbff;
	padding: 20px 30px;

	text-align: left;
	position: relative;
	.ant-breadcrumb,
	.ant-breadcrumb a,
	/deep/ .ant-breadcrumb-separator {
		font-size: 18px;
		color: #37474f;
	}
	.ant-breadcrumb a {
		color: #247cf0;
	}
	@media (max-width: 479px) {
		padding: 10px;
	}
}
.hd-right {
	float: right;
}

.cardbox {
	margin: 0 30px 0;
	height: 30vh;
	@media (max-width: 479px) {
		margin: 0 10px 10px;
	}
}

/deep/ .ant-form-inline .ant-form-item {
	width: 100%;
	display: flex;
	align-items: center;

	/deep/ .ant-form-item-control-wrapper {
		flex: 1;

		/deep/ .ant-calendar-picker {
			width: 100%;
		}
	}

	.ant-form-item-label {
		white-space: normal;
		line-height: 1.2;
		width: 8em !important;
	}
	.ant-form-item-control-wrapper {
		flex: 1;
	}
}

/deep/ .topbar {
	background: #fff;
	z-index: 999;
	padding: 0;
	margin-bottom: 10px;
}

/deep/ .viewlist {
	margin: 0;
	min-height: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	.table-wrapper {
		background: #fff;
		// box-shadow: 0 0 10px rgba(181, 181, 181, 0.5);
		margin-bottom: 0;
		border-radius: 2px;
		overflow: hidden;
	}

	/deep/ .ant-card-body {
		padding: 0 20px;
	}

	/deep/ .ant-pagination-total-text {
		position: absolute;
		left: 8px;
	}
}
/deep/ .handlerbtn {
	min-width: 250px;
	text-align: right;
}

.handlerbtn /deep/.ant-btn + .ant-btn,
/deep/ .table-wrapper .operation .ant-btn + .ant-btn {
	margin-left: 10px;
}

/deep/ .table-wrapper .operation .ant-btn {
	font-size: 12px;
}
.site-action {
	position: fixed;
	right: 32px;
	bottom: 10px;
	z-index: 1290;
	.ant-btn {
		height: 56px;
		width: 56px;
		background: #11c26d;
		border-color: #11c26d;
		font-size: 24px;
		&:hover {
			background-color: #28d17c;
			border-color: #28d17c;
		}
	}
	.site-action-buttons {
		position: absolute;
		bottom: 56px;
		left: 0;
		display: none;
		width: 100%;
		text-align: center;
	}
	/deep/ .anticon-arrow-down,
	/deep/ .anticon-edit {
		-webkit-animation-name: fade-scale-02;
		animation-name: fade-scale-02;
		-webkit-animation-duration: 0.5s;
		animation-duration: 0.5s;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		opacity: 0;
		transform: scale(0.2);
	}
	[class*='animation-'] {
		-webkit-animation-duration: 0.5s;
		animation-duration: 0.5s;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	.site-action-buttons .ant-btn {
		display: block;
		margin: 0 auto;
		margin-bottom: 10px;
		-webkit-animation-delay: 0.1s;
		animation-delay: 0.1s;
	}
	.animation-slide-bottom {
		-webkit-animation-name: slide-bottom;
		animation-name: slide-bottom;
	}
	&.active .site-action-buttons {
		display: block;
	}
}
@-webkit-keyframes slide-bottom {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes slide-bottom {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@-webkit-keyframes fade-scale-02 {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.2);
		transform: scale(0.2);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes fade-scale-02 {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.2);
		transform: scale(0.2);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
.footerbar {
	position: relative;
	bottom: 56px;
	min-height: 56px;
	width: 0;
	align-items: center;
	display: none;
	&.showfooter {
		display: flex;
	}
	&.hasNoRecord {
		bottom: 0;
	}
}
/deep/ .ant-card-body {
	padding: 0 14px;
	height: 100%;
	display: flex;
	flex-direction: column;
}
</style>
